<template>
  <div class="user-login">
    <a-flex align="center" justify="center" :style="{height: '100%'}">
      <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          name="phone"
          :rules="[
          { required: true, message: '手机号码不能为空' },
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'
          }]"
        >
          <a-input size="large" v-model:value="formState.phone" placeholder="手机号码" width="300">
            <template #suffix>
              <PhoneOutlined />
            </template>
          </a-input>
        </a-form-item>

        <a-form-item
          name="code"
          :rules="[{ required: true, message: '验证码不能为空' }]"
        >
          <a-input size="large" v-model:value="formState.code" placeholder="验证码">
            <template #suffix>
              <LockOutlined class="site-form-item-icon" />
            </template>
          </a-input>
        </a-form-item>
      
        <a-form-item>
          <a-button type="primary" :loading="loading" html-type="submit" class="login-form-button">
            登陆
          </a-button>
          <a-button :disabled="disabled" type="primary" html-type="submit" style="margin-left: 15px;">
            获取验证码
          </a-button>
        </a-form-item>
      </a-form>
    </a-flex>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router'
import { PhoneOutlined, LockOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue'
import useUserStore from '../../stores/module/user'
const userStore = useUserStore()

const router = useRouter()

interface FormState {
  phone: string;
  code: string;
}
const formState = reactive<FormState>({
  phone: '',
  code: '',
});

const loading = ref<boolean>(false)
const content = ref('登陆中...');
const onFinish = (values: any) => {
  loading.value = true
  message.loading({ content: () => content.value });
  console.log('Success:', values, formState.phone.slice(7, 11));
  userStore.login({userName: `测试${formState.phone.slice(7, 11)}`})
 
  setTimeout(() => {
    loading.value = false
    content.value = '登陆成功！';
    router.push({
      path: '/'
    })
  }, 1000)
};

const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};

const disabled = computed(() => {
  return !/^1[3456789]\d{9}$/.test(formState.phone)
});
</script>

<style lang="scss" scoped>
.user-login {
  position: sticky;
  z-index: 9;
  height: 100%;
}
</style>